<template>
    <el-card shadow="hover" class="note-item">
      <div class="note-item-content">
        <div class="display-flex justify-content-between">
          <div class="note-item-content-text">
            <span>{{note.payload}}</span>
          </div>
          <div>
            <span v-if="!isInActivePeriod(note.createAtLocal)">不是当前评分周期的记录</span>
            {{
            formatTime(note.createAtLocal)
            }}
          </div>
        </div>
        <div class="note-item-content-measures">
          <el-tag
              v-for="measure in note.measures"
              :key="measure.id"
              effect="plain"
              :hit="true"
              color="#fff"
              class="measure-tag"
            :class="{'checked-tag' : isCheckedTag(measure.id)}"
          > {{ measure.abbreviation}}: {{measure.name}} </el-tag>
        </div>
      </div>
      <div class="display-flex justify-content-between">
        <div>
          {{ formatActiveUser(note.createUser, note.createAtLocal) }}
        </div>
        <div class="display-flex">
          <div v-if="canEdite" @click="noteEditClick" class="pointer" style="display: flex;align-items: center;white-space: nowrap;">
            <el-icon  class="m-r-xs">
              <EditPen />
            </el-icon>
            <span>{{ $t('loc.edit') }}</span>
          </div>
          <div v-if="canDelete" @click="noteDeleteClick" class="pointer m-l-sm" style="display: flex;align-items: center;white-space: nowrap;">
            <el-icon class="m-r-xs">
              <Delete />
            </el-icon>
            <span>{{ $t('loc.delete') }}</span>
          </div>
        </div>

      </div>
    </el-card>
</template>

<script>
import moment from "moment";
import {mapState} from "vuex";
import tools from "@/utils/tools";
import NoteApi from "@/api/note";
import {Search, MoreFilled, Delete, EditPen, CirclePlus} from "@element-plus/icons-vue"
import {ElNotification} from "element-plus";
export default {
  name: "NoteItem",
  components: {
    Delete,
    EditPen
  },
  props: {
    note: {
      type: Object,
      required: true
    },
    childScoreRecords: {
      type: Array,
      default: () => {
        return []
      }
    },
    activePeriodAlias: {
      type: Object,
      default: {}
    },
    canDelete: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    canEdite: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  computed: {
    ...mapState({
      language: state => state.user.language // 用户语言
    }),
    isCheckedTag () {
      return (measureId) => {
        if (!measureId) {
          return false
        }
        if (!this.childScoreRecords || !this.childScoreRecords.length) {
          return false
        }
        if (!this.note || !this.note.id) {
          return false
        }
        return this.childScoreRecords.find(item => item.measureId === measureId)
      }
    },
    isInActivePeriod () {
      return (time) => {
        if (!time) {
          return true
        }
        if (!this.activePeriodAlias.startAndEndTime) {
          return true
        }
        let startTime = this.activePeriodAlias.startAndEndTime[0]
        let endTime = this.activePeriodAlias.startAndEndTime[1]
        return moment(time).isBetween(startTime, endTime)
      }
    }

  },
  mounted () {
    // 判断月份用什么语言展示
    if (this.language === 'zh-CN') {
      moment.locale("zh-cn")
    } else if (this.language === 'en-US') {
      moment.locale("en")
    } else {
      moment.locale("zh-cn")
    }
  },
  data() {
    return {
    }
  },
  methods: {
    formatTime(time) {
      // 取出时间的 年 月 日
      const year = moment(time).format('YYYY')
      const month = moment(time).format('MM')
      const day = moment(time).format('DD')
      return `${month}月${day}, ${year}`
    },
    formatTime2(time) {
      // 取出时间的 年 月 日
      const year = moment(time).format('YYYY')
      const month = moment(time).format('MM')
      const day = moment(time).format('DD')
      return `${month}月${day}, ${year} ${moment(time).format('HH:mm')}`
    },
    formatActiveUser(user , time) {
      let role = tools.formatRole(user.role)
      if (user) {
        return `${user.displayName}${role}在 ${this.formatTime2(time)} 创建`
      } else {
        return ''
      }
    },
    noteEditClick() {
      let note = this.note
      if (!note || !note.id) {
        return
      }
      this.$emit('toEdit', note)
    },
    noteDeleteClick() {
      let note = this.note
      if (!note || !note.id) {
        return
      }
      this.$confirm("您确认要删除该观察记录吗？如果测评点没有关联观察测评则无法评分", this.$t('loc.tip'), {
        confirmButtonText: this.$t('loc.done'),
        cancelButtonText: this.$t('loc.cancel'),
        type: 'warning',
      }).then(() => {
        NoteApi.deleteNote(note.id).then(res => {
          ElNotification({
            title: this.$t('loc.tip'),
            message: "观察记录删除成功",
            position: 'bottom-right',
          })
          this.$emit('toFresh')
        }).catch(error => {
          console.log('error', error)
          this.$message.error(error.response.data.description)
        });
      }).catch(() => {
        this.$message.error(error.response.data.description)
      });
    }
  }
}
</script>

<style scoped lang="less">
.note-item {
  .note-item-content-text {
    font-size: 16px;
    color: #323338!important;
    margin-bottom: 10px;
  }
}

.measure-tag {
  font-size: 12px;
  color: #58444e;
  border: 1px solid #999;
  background: #fff;
  margin-right: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}
.checked-tag {
  border: 1px solid #10B3B7;
  background: #fff;
  color: #10B3B7;
}
</style>